
import { useState } from 'react'
import { Select } from 'antd';
import { camelCase } from '@formily/shared';
import { PositionInput } from '@inbiz/react-settings-form';
import { SizeInput } from '@inbiz/react-settings-form';
import ColorInput from '../ColorInput';
import './index.less'


interface BorderType {
  [key: string]: string;
}

interface IBorderStyle {
  onChange: (a: BorderType) => void;
  value: BorderType
}

const createBorderProp = (position: string, key: string) => {
  const insert = position === 'center' ? '' : `-${position}`;
  return camelCase(`border${insert}-${key}`);
};

const BorderStyle = (props: IBorderStyle) => {
  const { value = {}, onChange } = props
  const [position, $position] = useState<string>('center')

  const boxStyle = value[createBorderProp(position, 'style')];
  const boxWidth = value[createBorderProp(position, 'width')];
  const boxColor = value[createBorderProp(position, 'color')];
  return (
    <div className='inbiz-comp-border-style'>
      <div className='left-position'>
        <PositionInput
          value={position}
          onChange={(value) => {
            $position(value)
          }}
        />
      </div>
      <div className='right-setting'>
        <Select
          options={[
            {
              label: 'None',
              value: 'none',
            },
            {
              label: <span className="border-style-solid-line" />,
              value: 'solid',
            },
            {
              label: <span className="border-style-dashed-line" />,
              value: 'dashed',
            },
            {
              label: <span className="border-style-dotted-line" />,
              value: 'dotted',
            },
          ]}
          placeholder='Please Select'
          value={boxStyle}
          onChange={(val) => {
            onChange({
              ...value,
              [createBorderProp(position, 'style')]: val
            })
          }}
        />
        <SizeInput
          exclude={['auto']}
          value={boxWidth}
          onChange={(val) => {
            onChange({
              ...value,
              [createBorderProp(position, 'width')]: val
            })
          }}
        />
        <ColorInput
          isGetPopupContainer={true}
          value={boxColor}
          onChange={(color) => {
            onChange({
              ...value,
              [createBorderProp(position, 'color')]: color
            })
          }}
        />
      </div>
    </div>
  )
}

export default BorderStyle